<template>
  <v-base :baseTitle="'日期选择'">
    <template slot="baseinfo">
      日期选择器，支持英语和中文两种显示，供用户选择日期
    </template>
    <template slot="baseform">
      <v-panel :paneltitle="'基础用法'">
        <v-demo>
          <v-datepicker @on-change="choose" slot="header"></v-datepicker>
          <p slot="code" v-text='demo_normal'>
          </p>
          <p slot="desc">
            日期选择器的基础用法
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'禁用输入'">
        <v-demo>
          <v-datepicker :readonly="true" @on-change="choose" slot="header"></v-datepicker>
          <p v-text="demo_readonly" slot="code"></p>
          <p slot="desc">
            禁止输入的日期选择器用法
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'禁用状态'">
        <v-demo>
          <v-datepicker @on-change="choose" :disabled="true" slot="header"></v-datepicker>
          <p slot="code" v-text='demo_disabled'>
          </p>
          <p slot="desc">
            日期选择器的禁止使用
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'组件属性'">
        <v-table :cols="attrApiTable.cols" :datas="attrApiTable.datas"></v-table>
      </v-panel>
      <v-panel :paneltitle="'事件'">
        <v-table :cols="eventApiTable.cols" :datas="eventApiTable.datas"></v-table>
      </v-panel>
    </template>
  </v-base>
</template>
<script>
  import base from './base.vue';
  import datepicker from '../../components/form/datepicker.vue';
  import panel from '@/components/panel/panel.vue';
  import demo from '@/components/componentdemo/componentdemo.vue';
  import table from '@/components/table/table.vue';
  export default{
    data () {
      return {
        items: [{
          text: '红色版',
          value: 0,
          active: false
        }, {
          text: '绿色版',
          value: 1
        }, {
          text: '蓝色版',
          value: 2
        }],
        demo_normal: '<v-datepicker></v-datepicker>',
        demo_readonly: '<v-datepicker  @on-change="choose" :readonly="true"></v-datepicker>',
        demo_disabled: '<v-datepicker @on-change="choose" :disabled="true"></v-datepicker>',
        attrApiTable: {
          cols: [{
            code: 'attr',
            value: '参数'
          }, {
            code: 'desc',
            value: '说明'
          }, {
            code: 'type',
            value: '类型'
          }, {
            code: 'option',
            value: '可选值'
          }, {
            code: 'default',
            value: '默认值'
          }],
          datas: [{
            attr: 'readonly',
            desc: '完全只读',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }, {
            attr: 'disabled',
            desc: '禁用',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }]
        },
        eventApiTable: {
          cols: [{
            code: 'name',
            value: '事件名称'
          }, {
            code: 'desc',
            value: '说明',
            width: 2
          }, {
            code: 'param',
            value: '回调参数'
          }],
          datas: [{
            name: 'on-change',
            desc: '当 input 的值改变时触发，返回值和文本框一致',
            param: '格式化后的值'
          }]
        }
      };
    },
    methods: {
      choose (item) {
        alert(item);
      }
    },
    components: {
      'v-base': base,
      'v-panel': panel,
      'v-datepicker': datepicker,
      'v-demo': demo,
      'v-table': table
    },
    mounted: function () {
    }
  };
</script>
<style>
</style>
